<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>04_样式类名操作</title>
		<script src="../js/jquery-1.11.1(1).js"></script>
		<!-- 样式类名操作：针对css3，添加，移除，切换的元素"类名"操作
		 addClass()                有参：1个参和多个参
		                           语法：addClass("类名")
								   <p class="类名">
								   语法：addClass("类名1 类名2")；
								   <p class="类名1 类名2">
								   功能：匹配元素集合中的所有元素
								        添加一个或者多个类名操作
									理解：元素添加存在的样式	
		 removeClass()       功能：匹配元素集合中的所有元素
								  移除一个或者多个类名操作    
		 toggleClass()        功能：如果元素有类名移除，没有则添加
		 hasClass()           功能：检查匹配元素集合中是否包含指定类名
		                            返回值bool
		 -->
		 <!-- 要求：1.jq引入
		            2.html:    div  id="targetElement"
					         4个按钮      id="addClassBtn"
							              id="removeClassBtn"
										  id="toggleClassBtn"
										  id="hasClassBtn"
					           div  id="resultArea"
					3.css: .bgColor{  300*300  背景颜色随意}
						     .broders{10个像素实现红色边框  倒角画圆}
							   
		 -->
		 <style>
			 .bgColor{
				 width: 300px;
				 height: 300px;
				 background: #f00;
			 }
			 .broders{
				 border: 10px solid #ff0;
				 border-radius: 50%;
			 }
		 </style>
	</head>
	<body>
		<div id="targetElement"></div>
				<button id="addClassBtn">添加类名</button>
				<button id="removeClassBtn">移除类名</button>
				<button id="toggleClassBtn">切换类名</button>
				<button id="hasClassBtn">检查类名是否存在</button>
				<div id="resultArea"></div>
		<script>
			//1.点击  添加类名  按钮  添加效果【样式】 300*300   背景色红色
			$("#addClassBtn").click(function(){
				//div添加样式---- 存在样式：类名
				$("#targetElement").addClass("bgColor broders");
				$("#resultArea").html("<h4>添加样式类名：bgColor<h4></h4>");
			});
			//2.点击  添加类名  按钮  添加效果【样式】
			 //300*300   背景色红色   圆   外层  10px黄色框
			 //3.点击  移除类名  按钮  添加效果【样式】 300*300   背景色红色
			 $("#removeClassBtn").click(function(){
			 	//div添加样式---- 存在样式：类名
			 	$("#targetElement").removeClass("broders");
			 	$("#resultArea").html("<h4>移除样式类名：bgColor<h4></h4>");
			 });
			 //4.点击  切换类名  按钮  添加效果【样式】
			 //300*300   背景色红色   圆   外层  10px黄色框
			 $("#toggleClassBtn").click(function(){
			 	//div添加样式---- 存在样式：类名
			 	$("#targetElement").toggleClass("broders");
			 	$("#resultArea").html("<h4>切换样式类名：broders<h4></h4>");
			 });
			 //5.点击  切换类名  按钮  添加效果【样式】
			 //去掉 300*300  背景色红色
			 $("#toggleClassBtn").click(function(){
			 	//div添加样式---- 存在样式：类名
			 	$("#targetElement").toggleClass("bgColor");
			 	$("#resultArea").html("<h4>切换样式类名：broders<h4></h4>");
			 });
			 //6.检查类名是否存在：true存在   false不存在
			 $("#hasClassBtn").click(function(){
			 	//div添加样式---- 存在样式：类名
			 	var hc=$("#targetElement").hasClass("broders");
			 	$("#resultArea").text("检查当前样式是否存在："+hc);
			 });
		</script>
	</body>
</html>